<template>
  <div class="box">
    <div>测试环境</div>
    <div class="innerBox">
      <template v-for="item in testList" >
        <div class="linkStyle" @click="toPage(item.url)">
          <a-icon type="question-circle" theme="twoTone" />
          <a-tooltip>
            <template slot="title">
              {{ item.name }}
            </template>
            {{ item.name }}
          </a-tooltip></div>
      </template>
    </div>

    <div>生产环境</div>
    <div class="innerBox">
      <template v-for="item in prodList" >
        <div class="linkStyle" @click="toPage(item.url)">
          <a-icon type="question-circle" theme="twoTone" />
          <a-tooltip>
            <template slot="title">
              {{ item.name }}
            </template>
            {{ item.name }}
          </a-tooltip></div>
      </template>
    </div>
  </div>
</template>

<script>
  import domain from '../../../domain.js'
  const base = domain.target
  export default {
    name: 'PlatformCenter',
    data () {
      return {
        list: [],
        testList: [],
        prodList: []
      }
    },
    created () {
     this.$post(`${base}/url/searchUrlList`, { pageNo: 1, pageSize: 1000 }).then((res) => { //
        console.log('res', res)
        if (res.data.code == 20000) {
          this.list = res.data.data.list
          this.testList = this.list.filter((item, index) => {
            return item.type == 1
          })
          this.prodList = this.list.filter((item, index) => {
            return item.type == 2
          })
        }
      })
    },
    methods: {
      toPage (url) {
        console.log(url)
        const a = document.createElement('a')
        a.setAttribute('href', url)
        a.setAttribute('target', '_self ')
        document.body.appendChild(a)
        a.click()
        // document.removeChild(a)
      }
    }
  }
</script>

<style scoped lang="less">
  .box{
    width: 100%;
    margin: 0 auto;
    height: 100vh;
    background-color: #fff;
/*    display: flex;
    justify-content: center;
    align-items: flex-start;*/
    .innerBox{
      display: flex;
      /*justify-content: center;*/
      align-items: flex-start;
      flex-wrap: wrap;
      width: 95%;
      padding: 1rem 1rem 1rem 0;
      margin-bottom: 2rem;
      .linkStyle{
        width: 12rem;
        height: 5rem;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
        color:#1890ff;
        cursor: pointer;
        margin: 0 5rem;
      }
    }
  }
</style>
